<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function  ajax1(){
            //1创建ajax对象
            let xmlHttpRequest = new XMLHttpRequest();
            //2配置向后端请求类型get post 异步请求数据
            xmlHttpRequest.open("get","/web_war_exploded/ajax1",true);
            //3监听数据是否请求成功
            xmlHttpRequest.onreadystatechange=function (){
                //服务和客户端握手
                if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                    if (xmlHttpRequest.status==200){
                        //responseText获取后端返回的数据存入data
                        let data=xmlHttpRequest.responseText;
                        //把data渲染前端页面
                        document.getElementById("show").innerHTML=data;
                    }
                }
            }
            //4发送请求
            xmlHttpRequest.send();
        }
    </script>
</head>
<body>
<h1>前后端分离</h1>
<div id="show">
    前端静态内容
</div>
<button onclick="ajax1()">
    请求数据
</button>
</body>
</html>